import {
  ActionType,
  ModalForm,
  PageContainer,
  ProColumns,
  ProForm,
  ProFormDigit,
  ProFormMoney,
  ProFormSelect,
  ProFormSwitch,
  ProFormText,
  ProTable
} from "@ant-design/pro-components";
import {Button, Flex, Form, Image, message, Modal, Popconfirm, Tooltip, Upload, UploadFile, UploadProps} from "antd";
import React, {useRef, useState} from "react";
import {
  CloudUploadOutlined,
  DeleteOutlined,
  EditOutlined,
  FileImageOutlined,
  OrderedListOutlined,
  PlusOutlined,
  SettingFilled,
  SwapOutlined,
  UnorderedListOutlined,
  UploadOutlined
} from "@ant-design/icons";
import {
  globalApi,
  globalLoadTableApi,
  globalLoadTableApiCode,
  handleGloblApi,
  handleGloblApiResult
} from "@/services/admin-api/globalApi";
import {aliyunUploadFile, product_main} from "@/services/admin-api/aliyun";
import AliyunUpload from "@/components/Upload/AliyunUpload";
import {Access, useAccess} from "umi";

type Product = {
  productId: number
  productUuid: string
  productName: string
  productMain: boolean
  productStatus: number
  productTypeId: number
  productTypeName: string
  douyinProductId: string
  lowPrice: number
  productMainImg: string
  customerHide: boolean
  indexRecommend: boolean
  moveHouse: boolean
  indexHot: boolean
  delFlag: boolean
  createTime: string
  createUserId: number
  createUserName: string
  updateTime: string
  updateUserId: number
  updateUserName: string
}

type ProductSpecification = {
  productSpecificationId: number
  productSpecification: string
  productId: number
  productName: string
  productPrice: number
  customerHide: boolean
  delFlag: boolean
  createTime: string
  createUserId: number
  createUserName: string
  updateTime: string
  updateUserId: number
  updateUserName: string
}

export type ProductInventory = {
  inventoryId: number
  productSpecificationId: number
  productSpecification: string
  productId: number
  productName: string
  storeId: number
  storeName: string
  productInventory: number
  delFlag: boolean
  createTime: string
  createUserId: number
  createUserName: string
  updateTime: string
  updateUserId: number
  updateUserName: string
}

const productTypeSelect = await globalApi('/sys/dictType', {key: 'productTypeSelect'})
console.log('productTypeSelect = ', productTypeSelect)

const productStatus = [
  {label: '注册', value: 0},
  {label: '上架', value: 1},
  {label: '下架', value: 2}
]

const storeSelect = await globalApi('/store/select', {})

const toFileList = (param: any) => {
  return param.map((file: any) => {
    file.uid = file.fileId
    file.name = file.fileOriginalName
    file.status = 'done'
    return file
  })
}

export default () => {

  const access = useAccess()

  const [fileList, setFileList] = useState<UploadFile[]>([]);

  const props: UploadProps = {
    onRemove: async (file: any) => {
      console.log('onRemove = ', file)
      // message.error('暂时不支持删除')

      if (file.fileId) {
        await handleGloblApi('/attachment/remove', {fileId: file.fileId})

        const index = fileList.indexOf(file);
        const newFileList = fileList.slice();
        newFileList.splice(index, 1);
        setFileList(newFileList);
      } else {
        message.error('刚上传的文件请刷新后重试')
      }

    },
    beforeUpload: async (file) => {
      console.log('beforeUpload = ', file)
      const isPNG = file.type === 'image/png' || file.type === 'image/jpeg' || file.type === 'image/jpg';
      if (!isPNG) {
        message.error(`${file.name} is not a png file`);
        return false
      }

      await aliyunUploadFile(file, formImage.getFieldValue('objId'), undefined, formImage.getFieldValue('objType'))

      setFileList([...fileList, file]);
      return false;
    },
    fileList,
  };

  const [modalSpecificationOpen, handleSpecificationModalOpen] = useState(false);
  const [modalInventoryOpen, handleInventoryModalOpen] = useState(false);
  const [modalOpen, handleModalOpen] = useState(false);
  const [modalChangeInventoryOpen, handleChangeInventoryModalOpen] = useState(false);
  const [modalImageOpen, handleImageModalOpen] = useState(false);
  const [form] = Form.useForm();
  const [formSpecification] = Form.useForm();
  const [formInventory] = Form.useForm();
  const [formChangeInventory] = Form.useForm();
  const [formImage] = Form.useForm();
  const actionRef = useRef<ActionType>();
  const actionSpecificationRef = useRef<ActionType>();
  const actionInventoryRef = useRef<ActionType>();

  const [isModalOpen, setIsModalOpen] = useState(false)
  const [isInventoryModalOpen, setInventoryIsModalOpen] = useState(false)
  const [product, setProduct] = useState<Product>()

  const [visible, setVisible] = useState(false);
  const [imageList, setImageList] = useState<any[]>([]);

  const imageFragment = (url: any, objId: any, objType: any) => {
    if (!url) {
      const props = {
        objId, objType, back: () => {
          actionRef.current?.reload()
        }
      }
      return <Access accessible={access.canAuth('product:edit')}><AliyunUpload {...props} /></Access>
    }
    return <Flex gap="small" wrap="wrap">
      <Access accessible={access.canAuth('product:edit')}>
        <Button
          size={"small"} icon={<FileImageOutlined/>}
          onClick={() => {
            setImageList([{
              fileId: Math.floor(Math.random() * 10),
              filePath: 'https://bdq-cloud.oss-cn-shenzhen.aliyuncs.com' + url
            }])
            setVisible(true)
          }}/>
        <Popconfirm
          title="删除图片" description="确认删除这张图片？" okText="Yes" cancelText="No"
          onConfirm={async () => {
            await globalApi('/attachment/remove', {objId, objType})
            actionRef.current?.reload()
          }}>
          <Button size={'small'} danger icon={<DeleteOutlined/>}/>
        </Popconfirm>
      </Access>
    </Flex>;
  }

  const columns: ProColumns<Product>[] = [
    // {title: '', valueType: 'indexBorder'},
    {title: 'ID', dataIndex: 'productId', valueType: 'digit'},
    {title: '编号', dataIndex: 'productUuid', valueType: 'text'},
    {title: '名称', dataIndex: 'productName', valueType: 'text',},
    {title: '短标题', dataIndex: 'subTitle', valueType: 'text', hideInSearch: true,},
    {title: '抖音产品ID', dataIndex: 'douyinProductId', valueType: 'text', hideInSearch: true,},
    {title: '最低价', dataIndex: 'lowPrice', valueType: 'money', hideInSearch: true,},
    {
      title: '搬家产品',
      dataIndex: 'moveHouse',
      valueType: 'text',
      hideInSearch: true,
      render: (_, record) => record.moveHouse ? '是' : '否'
    },
    {
      title: '隐藏',
      dataIndex: 'customerHide',
      valueType: 'text',
      hideInSearch: true,
      render: (_, record) => record.customerHide ? '隐藏' : '可见'
    },
    {
      title: '推荐',
      dataIndex: 'indexRecommend',
      valueType: 'text',
      hideInSearch: true,
      render: (_, record) => record.indexRecommend ? '是' : '否'
    },
    {
      title: '热销',
      dataIndex: 'indexHot',
      valueType: 'text',
      hideInSearch: true,
      render: (_, record) => record.indexHot ? '是' : '否'
    },
    {
      title: '主显',
      dataIndex: 'productMain',
      valueType: 'text',
      render: (_, record) => record.productMain ? '是' : '否'
    },
    // {title: '类目ID', dataIndex: 'productTypeId', valueType: 'digit', hideInSearch: true},
    {title: '类目名称', dataIndex: 'productTypeName', valueType: 'text', hideInSearch: true},
    {title: '状态', dataIndex: 'productStatus', valueType: 'select', fieldProps: {options: productStatus}},
    {title: '产品类型', dataIndex: 'productTypeId', valueType: 'select', fieldProps: {options: productTypeSelect.data}},
    {
      title: '主图', dataIndex: 'productMainImg', valueType: 'text', hideInSearch: true,
      render: (_, record) => imageFragment(record.productMainImg, record.productId, product_main)
    },
    {
      title: '轮播图', valueType: 'text', hideInSearch: true,
      render: (_, record) => <>
        <Tooltip key={'list_img_' + record.productId} title={"产品轮播图"}>
          <Button
            size="small" icon={<FileImageOutlined/>} type="primary"
            onClick={async () => {
              const r = await handleGloblApiResult('/attachment/list', {objId: record.productId, objType: 4})
              if (r.data.length > 0) {
                setImageList(r.data.map((f: any) => {
                  f.filePath = 'https://bdq-cloud.oss-cn-shenzhen.aliyuncs.com' + f.filePath
                  return f
                }))
                setVisible(true)
              } else {
                message.error('没有图片')
              }
            }}
          /></Tooltip>
        &nbsp;
        <Access accessible={access.canAuth('product:edit')}>
          <Tooltip key={'list_imgupload_' + record.productId} title={"上传"}>
            <Button
              size="small" icon={<CloudUploadOutlined/>} type="primary"
              onClick={async () => {
                const r = await handleGloblApiResult('/attachment/list', {objId: record.productId, objType: 4})
                console.log('r file = ', r.data)
                setFileList(toFileList(r.data))
                formImage.setFieldsValue({objId: record.productId, objType: 4})
                handleImageModalOpen(true)
              }}
            /></Tooltip>
        </Access>
      </>
    },
    {
      title: '详情图', valueType: 'text', hideInSearch: true,
      render: (_, record) => <>
        <Tooltip key={'list_detailimgdetail_' + record.productId} title={"产品详情图"}>
          <Button
            size="small" icon={<FileImageOutlined/>} type="primary"
            onClick={async () => {
              const r = await handleGloblApiResult('/attachment/list', {objId: record.productId, objType: 5})
              if (r.data.length > 0) {
                setImageList(r.data.map((f: any) => {
                  f.filePath = 'https://bdq-cloud.oss-cn-shenzhen.aliyuncs.com/' + f.filePath
                  return f
                }))
                setVisible(true)
              } else {
                message.warning('没有图片')
              }
            }}
          /></Tooltip>
        &nbsp;
        <Access accessible={access.canAuth('product:edit')}>
          <Tooltip key={'list_detailimgdetail_' + record.productId} title={"上传"}>
            <Button
              size="small" icon={<CloudUploadOutlined/>} type="primary"
              onClick={async () => {
                const r = await handleGloblApiResult('/attachment/list', {objId: record.productId, objType: 5})
                console.log('r file = ', r.data)
                setFileList(toFileList(r.data))
                formImage.setFieldsValue({objId: record.productId, objType: 5})
                handleImageModalOpen(true)
              }}
            /></Tooltip>
        </Access>
      </>
    },
    {title: '创建时间', dataIndex: 'createTime', valueType: 'dateTime', hideInSearch: true,},
    {title: '创建用户ID', dataIndex: 'createUserId', valueType: 'digit', hideInSearch: true,},
    {title: '创建用户', dataIndex: 'createUserName', valueType: 'text', hideInSearch: true,},
    {title: '更新时间', dataIndex: 'updateTime', valueType: 'dateTime', hideInSearch: true,},
    {title: '更新用户ID', dataIndex: 'updateUserId', valueType: 'digit', hideInSearch: true,},
    {title: '更新用户', dataIndex: 'updateUserName', valueType: 'text', hideInSearch: true,},
    {
      title: <SettingFilled/>,
      render: (_, record) => [
        <Access accessible={access.canAuth('product:edit')}>
          <Tooltip key={'edit_' + record.productId} title={"编辑产品"}>
            <Button
              size="small" icon={<EditOutlined/>} type="primary"
              onClick={async () => {
                form.setFieldsValue({
                  ...record,
                  productType: {label: record.productTypeName, value: record.productTypeId}
                })
                handleModalOpen(true)
              }}
            />
          </Tooltip></Access>,
        <Tooltip key={'list_specification_' + record.productId} title={"产品规格"}>
          <Button
            size="small" icon={<OrderedListOutlined/>} type="primary"
            onClick={async () => {
              setProduct({...record})
              formSpecification.setFieldsValue({productId: record.productId, productName: record.productName})
              setIsModalOpen(true)
            }}
          /></Tooltip>,
        // <Tooltip key={'list_product_inventory' + record.productId} title={"产品库存"}>
        //   <Button
        //     size="small" icon={<UnorderedListOutlined/>} type="primary"
        //     onClick={async () => {
        //       setProduct({...record})
        //       setInventoryIsModalOpen(true)
        //     }}
        //   /></Tooltip>,
      ],
      valueType: 'option',
    },
  ];

  const specificationColumns: ProColumns<ProductSpecification>[] = [
    // {title: '', valueType: 'indexBorder'},
    {title: '规格ID', dataIndex: 'productSpecificationId', valueType: 'digit'},
    {title: '产品ID', dataIndex: 'productId', valueType: 'digit',},
    {title: '产品名称', dataIndex: 'productName', valueType: 'text',},
    {title: '规格', dataIndex: 'productSpecification', valueType: 'text'},
    {
      title: '隐藏',
      dataIndex: 'customerHide',
      valueType: 'text',
      hideInSearch: true,
      render: (_, record) => record.customerHide ? '隐藏' : '可见'
    },
    {title: '价格', dataIndex: 'productPrice', valueType: 'money'},
    {title: '创建时间', dataIndex: 'createTime', valueType: 'dateTime', hideInSearch: true,},
    {title: '创建用户ID', dataIndex: 'createUserId', valueType: 'digit', hideInSearch: true,},
    {title: '创建用户', dataIndex: 'createUserName', valueType: 'text', hideInSearch: true,},
    {title: '更新时间', dataIndex: 'updateTime', valueType: 'dateTime', hideInSearch: true,},
    {title: '更新用户ID', dataIndex: 'updateUserId', valueType: 'digit', hideInSearch: true,},
    {title: '更新用户', dataIndex: 'updateUserName', valueType: 'text', hideInSearch: true,},
    {
      title: <SettingFilled/>,
      render: (_, record) => [
        <Access accessible={access.canAuth('product:edit')}>
          <Tooltip key={'edit_specification_' + record.productId} title={"编辑规格"}>
            <Button
              size="small" icon={<EditOutlined/>} type="primary"
              onClick={async () => {
                formSpecification.setFieldsValue({...record})
                handleSpecificationModalOpen(true)
              }}
            />
          </Tooltip></Access>,
      ],
      valueType: 'option',
    },
  ];

  const inventoryColumns: ProColumns<ProductInventory>[] = [
    // {title: '', valueType: 'indexBorder'},
    {title: 'ID', dataIndex: 'inventoryId', valueType: 'digit'},
    {title: '规格ID', dataIndex: 'productSpecificationId', valueType: 'digit', hideInSearch: true},
    {title: '规格', dataIndex: 'productSpecification', valueType: 'text', hideInSearch: true},
    {title: '产品ID', dataIndex: 'productId', valueType: 'digit', hideInSearch: true},
    {title: '产品名称', dataIndex: 'productName', valueType: 'text', hideInSearch: true},
    {title: '店铺ID', dataIndex: 'storeId', valueType: 'digit', hideInSearch: true},
    {title: '店铺名称', dataIndex: 'storeName', valueType: 'text', hideInSearch: true},
    {title: '库存', dataIndex: 'productInventory', valueType: 'digit', hideInSearch: true},
    {title: '创建时间', dataIndex: 'createTime', valueType: 'dateTime', hideInSearch: true,},
    {title: '创建用户ID', dataIndex: 'createUserId', valueType: 'digit', hideInSearch: true,},
    {title: '创建用户', dataIndex: 'createUserName', valueType: 'text', hideInSearch: true,},
    {title: '更新时间', dataIndex: 'updateTime', valueType: 'dateTime', hideInSearch: true,},
    {title: '更新用户ID', dataIndex: 'updateUserId', valueType: 'digit', hideInSearch: true,},
    {title: '更新用户', dataIndex: 'updateUserName', valueType: 'text', hideInSearch: true,},
    {
      title: <SettingFilled/>,
      render: (_, record) => [
        <Access accessible={access.canAuth('inventory:edit')}>
          <Tooltip key={'change_' + record.productId} title={"出入库"}>
            <Button
              size="small" icon={<SwapOutlined/>} type="primary"
              onClick={async () => {
                formChangeInventory.setFieldsValue({...record})
                handleChangeInventoryModalOpen(true)
              }}
            />
          </Tooltip>
        </Access>,
      ],
      valueType: 'option',
    },
  ];

  return <PageContainer header={{title: '', breadcrumb: {},}}>
    <ProTable<Product>
      columns={columns} actionRef={actionRef}
      search={{span: 4}}
      headerTitle={
        <Access accessible={access.canAuth('product:add')}>
          <Button
            key="primary" type="primary" icon={<PlusOutlined/>} onClick={() => {
            handleModalOpen(true)
          }}/>
        </Access>
      }
      request={async (param) => globalLoadTableApiCode('/product/table', 'product:list:search', access, param)}
      rowKey={(record) => record.productId}
      columnsState={{
        defaultValue: {
          delFlag: {show: false},
          createUserId: {show: false},
          updateUserId: {show: false}
        }
      }}/>

    <ModalForm
      modalProps={{destroyOnClose: true}} autoFocusFirstInput submitTimeout={15000}
      width="600px" open={modalOpen} onOpenChange={handleModalOpen} form={form}
      onFinish={async (value) => {
        console.log('value = ', value);
        // let success = await handleCreateOrUpdate(value as Product)
        let success = await handleGloblApi('/product/saveOrUpdate', value)

        if (success) {
          actionRef.current?.reload()
          return true
        }

      }}
    >
      <ProFormDigit label="productId" name="productId" hidden/>
      <ProFormDigit name="productTypeId" hidden/>
      <ProFormText name="productTypeName" hidden/>

      <ProForm.Group>
        <ProFormText label="名称" rules={[{required: true}]} name="productName"/>
        <ProFormText label="短标题" rules={[{required: true}]} name="subTitle"/>
      </ProForm.Group>

      <ProForm.Group>
        <ProFormSwitch
          label="隐藏" tooltip={"客户在前端是否可见"} rules={[{required: true}]} initialValue={false}
          name="customerHide"/>
        <ProFormSwitch
          label="搬家产品" tooltip={"产品是否含有搬家属性 起点 新家等与收纳和上门服务不一致"} rules={[{required: true}]}
          initialValue={false} name="moveHouse"/>
        <ProFormSwitch
          label="推荐" tooltip={"小程序首页推荐"} rules={[{required: true}]} initialValue={false}
          name="indexRecommend"/>
        <ProFormSwitch
          label="热销" tooltip={"小程序首页热销"} rules={[{required: true}]} initialValue={false}
          name="indexHot"/>
        <ProFormSwitch
          label={"主显"} name={"productMain"} rules={[{required: true}]} initialValue={false}
          tooltip={"是否可以绑定显示订单套餐"}/>
      </ProForm.Group>

      <ProForm.Group>
        <ProFormSelect label="状态" rules={[{required: true}]} name="productStatus" options={productStatus}/>
        <ProFormSelect
          label="产品类型" rules={[{required: true}]} fieldProps={{
          labelInValue: true, onSelect: (value) => {
            form.setFieldsValue({productTypeId: value.value, productTypeName: value.label})
          }
        }} name="productType" options={productTypeSelect.data}/>

        <ProFormMoney label="最低价" rules={[{required: true}]} name="lowPrice" width={"xs"}/>
      </ProForm.Group>

      <ProForm.Group>
        <ProFormText label="抖音产品ID" name="douyinProductId"/>
      </ProForm.Group>

    </ModalForm>

    <Modal
      destroyOnClose width={1000} open={isModalOpen} onOk={() => {
      setIsModalOpen(false)
    }} onCancel={() => {
      setIsModalOpen(false)
    }}>
      <ProTable
        params={{productId: product?.productId}} actionRef={actionSpecificationRef} headerTitle={
        <Access accessible={access.canAuth('product:add')}>
          <Tooltip title={"新增产品规格"}>
            <Button
              key="primary" type="primary" icon={<PlusOutlined/>} onClick={() => {
              // handleModalOpen(true)
              handleSpecificationModalOpen(true)
            }}/>
          </Tooltip>
        </Access>
      } search={false} columns={specificationColumns} rowKey={(record) => record.productSpecificationId}
        columnsState={{
          defaultValue: {
            productId: {show: false},
            delFlag: {show: false},
            createUserId: {show: false},
            updateUserId: {show: false}
          }
        }} request={async (param) => globalLoadTableApi('/product/productSpecificationTable', param)}/>

      <ModalForm
        modalProps={{destroyOnClose: true}} autoFocusFirstInput submitTimeout={15000}
        width="400px" open={modalSpecificationOpen} onOpenChange={handleSpecificationModalOpen} form={formSpecification}
        onFinish={async (value) => {
          console.log('value = ', value)
          let success = await handleGloblApi('/product/productSpecificationSaveOrUpdate', value)

          if (success) {
            actionSpecificationRef.current?.reload()
            return true
          }

        }}
      >
        <ProFormDigit label="productSpecificationId" name="productSpecificationId" hidden/>
        <ProFormDigit label="产品ID" name="productId" hidden/>
        <ProFormText label="产品名称" name="productName" hidden/>
        <ProFormText label="规格" rules={[{required: true}]} name="productSpecification"/>
        <ProFormMoney label="价格" rules={[{required: true}]} name="productPrice"/>
        <ProFormSwitch label="隐藏" rules={[{required: true}]} initialValue={false} name="customerHide"/>
      </ModalForm>

    </Modal>

    <Modal
      destroyOnClose width={1200} open={isInventoryModalOpen} onOk={() => {
      setInventoryIsModalOpen(false)
    }} onCancel={() => {
      setInventoryIsModalOpen(false)
    }}>
      <ProTable
        params={{productId: product?.productId}} actionRef={actionInventoryRef} headerTitle={
        <Tooltip title={"新增库存"}>
          <Button
            key="primary" type="primary" icon={<PlusOutlined/>} onClick={() => {
            handleInventoryModalOpen(true)
          }}/>
        </Tooltip>
      } search={false} columns={inventoryColumns} rowKey={(record) => record.inventoryId}
        columnsState={{
          defaultValue: {
            inventoryId: {show: false},
            productSpecificationId: {show: false},
            productId: {show: false},
            storeId: {show: false},
            delFlag: {show: false},
            createUserId: {show: false},
            updateUserId: {show: false}
          }
        }} request={async (param) => globalLoadTableApi('/product/productInventoryTable', param)}/>

      <ModalForm
        modalProps={{destroyOnClose: true}} autoFocusFirstInput submitTimeout={15000}
        width="400px" open={modalInventoryOpen} onOpenChange={handleInventoryModalOpen} form={formInventory}
        onFinish={async (value) => {
          console.log('value = ', value)
          let success = await handleGloblApi('/product/productInventorySaveOrUpdate', value)
          if (success) {
            actionInventoryRef.current?.reload()
            return true
          }
        }}
      >
        <ProFormDigit label="inventoryId" name="inventoryId" hidden/>
        <ProFormDigit label="productId" name="productId" initialValue={product?.productId} hidden/>
        <ProFormText label="productName" name="productName" initialValue={product?.productName} hidden/>
        <ProFormDigit label="productSpecificationId" name="productSpecificationId" hidden/>
        <ProFormText label="productSpecification" name="productSpecification" hidden/>
        <ProFormDigit label="storeId" name="storeId" hidden/>
        <ProFormText label="storeName" name="storeName" hidden/>

        <ProFormSelect
          label="规格" rules={[{required: true}]} name="specification" fieldProps={{
          labelInValue: true, onSelect: (val) => {
            formInventory.setFieldsValue({productSpecificationId: val.value, productSpecification: val.label})
          }
        }} params={{productId: product?.productId}} request={async (param) => {
          const r = await globalApi('/product/specificationSelect', param)
          return r.data
        }}/>

        <ProFormSelect
          label="店铺" rules={[{required: true}]} name="store" fieldProps={{
          labelInValue: true, onSelect: (val) => {
            formInventory.setFieldsValue({storeId: val.value, storeName: val.label})
          }
        }} options={storeSelect.data} showSearch/>

        {formInventory.getFieldValue('inventoryId') ? '' :
          <ProFormDigit label="库存" rules={[{required: true}]} name="productInventory"/>}

      </ModalForm>

      <ModalForm
        modalProps={{destroyOnClose: true}} autoFocusFirstInput submitTimeout={15000}
        width="400px" open={modalChangeInventoryOpen} onOpenChange={handleChangeInventoryModalOpen}
        form={formChangeInventory}
        onFinish={async (value) => {
          console.log('value = ', value)
          let success = await handleGloblApi('/product/productChanegInventory', value)

          if (success) {
            actionInventoryRef.current?.reload()
            return true
          }

        }}
      >
        <ProFormDigit label="inventoryId" name="inventoryId" hidden/>
        <ProFormDigit label="productId" name="productId" initialValue={product?.productId} hidden/>
        <ProFormText label="productName" name="productName" initialValue={product?.productName} hidden/>
        <ProFormDigit label="productSpecificationId" name="productSpecificationId" hidden/>
        <ProFormText label="productSpecification" name="productSpecification" hidden/>
        <ProFormDigit label="storeId" name="storeId" hidden/>
        <ProFormText label="storeName" name="storeName" hidden/>

        <ProFormSelect
          rules={[{required: true}]} label={"操作类型"} name={"operateType"}
          options={[{label: '出库', value: 0}, {label: '入库', value: 1}]}/>

        <ProFormDigit
          min={1} label="出入库数量" rules={[{required: true}]} name="changeInventory"/>
        <ProFormText label="备注" rules={[{required: true}]} name="remark"/>

      </ModalForm>

    </Modal>

    <ModalForm
      modalProps={{destroyOnClose: true}} autoFocusFirstInput submitTimeout={15000}
      width="400px" open={modalImageOpen} onOpenChange={handleImageModalOpen}
      form={formImage}
      onFinish={async (value) => {
        // console.log('value = ', value)
        // let success = await handleGloblApi('/product/productChanegInventory', value)
        //
        // if (success) {
        //   actionInventoryRef.current?.reload()
        //   return true
        // }

      }}
    >
      <ProFormDigit name="objId" hidden/>
      <ProFormDigit name="objType" hidden/>

      <Form.Item label="图片">
        <Upload {...props}>
          <Button icon={<UploadOutlined/>}>选择图片</Button>
        </Upload>
      </Form.Item>

    </ModalForm>

    <div style={{display: 'none'}}>
      <Image.PreviewGroup preview={{visible, onVisibleChange: (vis) => setVisible(vis)}}>
        {imageList.map(image => (<Image key={'image_' + image.fileId} src={image.filePath}/>))}
      </Image.PreviewGroup>
    </div>

  </PageContainer>
}
